<template>
  <view class="shade" v-if="showShade" @tap="hidePop">
		 <!-- :class="{'show': showPop}" -->
  	<view class="pop" :style="popStyle">
  		<view class="menu" @tap="handleCopy" v-show="copyShow">
				<view>
					<i class="ri-file-copy-line icon"></i>
				</view>
				<view class="title">
					复制
				</view>
			</view>
			
			<view class="menu" @click="handleForward">
				<view>
					<i class="ri-reply-line icon"></i>
				</view>
				<view class="title">
					转发
				</view>
			</view>
			
			<view class="menu" @click="handleReply">
				<view>
					<i class="ri-message-2-line icon"></i>
				</view>
				<view class="title">
					回复
				</view>
			</view>
			
			<view v-show="revokeShow" class="menu" @click="handleRevoke">
				<view>
					<i class="ri-arrow-go-back-line icon"></i>
				</view>
				<view class="title">
					撤回
				</view>
			</view>
  	</view>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'
import { useCopyStore } from '@/pinia-store/user'
import { mapStores } from 'pinia'

export default {
  name: 'PopoverMenu',
  props: {
		currentMsg: {
			type: Object,
			required: {}
		},
		// popStyle: {
		// 	type: Object,
		// 	required: {}
		// },
		friend: {
			type: Object,
			default: {}
		},
		group: {
			type: Object,
			default: {}
		},
		imInfo: {
			type: Object,
			default: {}
		}
	},
  data() {
		return {
			showShade: false,
			showPop: false,
			popStyle: {}
		}
	},
	computed: {
		...mapStores(useCopyStore),
		copyShow() {
			const cache = JSON.parse(JSON.stringify(this.currentMsg))
			this.content = cache.content?.find(item => {
				return item.content !== '';
			})
			
			if(this.content?.type == 'text') return true;
			return false
		},
		revokeShow() {
			if(this.currentMsg?.group_id) {
				return this.currentMsg.from_account == this.imInfo?.account
			}else {
				return this.currentMsg.from_account != this.friend?.friend_account
			}
		}
	},
	methods: {
		async handleCopy() {
			let copyText = '';
			const find = this.content;
			if (find.type == 'text') {
				const htmlString = find.content;
				const match = htmlString.match(/<p[^>]*>([\s\S]*?)<\/p>/i);
				if (match) {
					copyText = match[1];
				} else {
					copyText = htmlString; // 防止报错，兜底
				}
			}
			
			const isATag = /^<a\b[^>]*>.*<\/a>$/i;
			if(isATag.test(copyText)) {
				const hrefMatch = copyText.match(/<a\b[^>]*\bhref=["']([^"']+)["'][^>]*>/i);
				copyText = hrefMatch ? hrefMatch[1] : '';
			}
			
			if (find.type === 'img') {
				copyText = ':/image'
				this.copyStore.setCopyValue(find.content);
			}
			
			if (find.type === 'img/text') {
				copyText = ':/img/text'
				this.copyStore.setCopyValue(find);
			}

			uni.setClipboardData({
				data: copyText,
				success: function () {
					uni.showToast({
						title: "已复制到剪切板",
						icon: 'none'
					});
				},
				fail: function () {
					uni.showToast({
						title: '复制失败',
						icon: 'none',
						duration: 3000,
					});
				}
			});
		},
		handleRevoke() {
			this.$emit('handleRevoke');
		},
		handleReply() {
			this.$emit('handleReply');
		},
		handleForward() {
			if(this.currentMsg?.group_id) {
				uni.navigateTo({
					url: `/pages/chat/message/common/relayTheMessage?type=2&id=${this.currentMsg.id}&groupId=${this.currentMsg.group_id}`,
				})
			}else {
				uni.navigateTo({
					url: `/pages/chat/message/common/relayTheMessage?type=1&id=${this.currentMsg.id}`,
				})
			}
		},
		show(popStyle) {
			this.popStyle = popStyle;
			this.showShade = true;
			this.showPop = true;
		},
		/* 隐藏弹窗 */
		hidePop() {
			this.showShade = false;
			setTimeout(() => {
				this.popoverMenu = false;
			}, 250);
		},
  }
};
</script>

<style lang="scss" scoped>
/* 遮罩 */
.shade {
	position: fixed;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparent !important;
	// -webkit-touch-callout: none;

	.pop {
		position: fixed;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 8px;
		z-index: 101;
		box-sizing: border-box;
		font-size: 28upx;
		text-align: left;
		color: #eee;
		background-color: rgba(0, 0, 0, 0.75);
		border-radius: 15px;
		transition: transform 0.3s ease-in-out 0s;
		user-select: none;
		-webkit-touch-callout: none;
		// transform: scale(0, 0);

		// &.show {
		// 	transform: scale(1, 1);
		// }

		/* 按钮 */
		.menu {
			margin: 0 5px;
			padding: 6px;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon{
				font-size: 18px;
			}
			.title {
				font-size: 12px;
				letter-spacing: 1px;
			}
		}
		.menu:active {
			background-color: rgba(0, 0, 0, .5);
		}
	}
}
</style>
